Accordions
Accordion — Default
Stuff goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut accumsan massa, quis tincidunt urna. Nam vel sem ut purus scelerisque semper sed non elit. Proin euismod cursus porta. Mauris ut felis non neque tempor interdum. Ut feugiat hendrerit velit, eget varius nisi posuere id. In id mi nibh. Mauris id libero ac diam egestas finibus nec ut arcu. Donec viverra purus quis quam maximus volutpat. Integer non eros odio. Integer nec est lobortis, lobortis justo ut, efficitur erat. Ut cursus ante a porta posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac felis ornare, interdum sem eu, ullamcorper lectus. Praesent fermentum velit ut dui tempor, in pretium purus cursus.
This example uses a "toggle-text" span to change the toggle action text.
You can also put the toggle below the panel to expand.
HTML
<noscript>
<style>
.collapse {
display: block;
}
</style>
</noscript>
<div id="accordionExample" class="panel-group">
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordionExample" href="#collapseOne" class="collapsed">Accordion Example</a>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<p>Stuff goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut accumsan massa, quis tincidunt urna. Nam vel sem ut purus scelerisque semper sed non elit. Proin euismod cursus porta. Mauris ut felis non neque tempor interdum. Ut feugiat hendrerit velit, eget varius nisi posuere id. In id mi nibh. Mauris id libero ac diam egestas finibus nec ut arcu. Donec viverra purus quis quam maximus volutpat. Integer non eros odio. Integer nec est lobortis, lobortis justo ut, efficitur erat. Ut cursus ante a porta posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac felis ornare, interdum sem eu, ullamcorper lectus. Praesent fermentum velit ut dui tempor, in pretium purus cursus.</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordionExample" href="#collapseTwo" class="collapsed toggle-caption"><span class="toggle-text">Accordion Example</span></a>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>This example uses a "toggle-text" span to change the toggle action text.</p>
</div>
</div>
</div>
<div class="panel">
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>You can also put the toggle below the panel to expand.</p>
</div>
</div>
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordionExample" href="#collapseThree" class="collapsed toggle-caption"><span class="toggle-text">Accordion Example</span></a>
</div>
</div>
</div>
</div>
Problem Being Solved
Some users may need to review large chunks of content that can interfere with the main goal of the page.
When to Use
The accordion should be used for content that only a few users will need to access, e.g., video transcripts. It can also be used when a user only needs to see detailed information for one or two items out of a long list, e.g., Waivers browse.
When Not to Use
Because accordions hide content, they should not be used when the content is pertinent to most audience members.
Formatting
- Use straight Bootstrap accordion html and classes.
- Add "collapsed" class to all accordions by default.
- Don't use "panel-default" class.
- Add a noscript tag immediately before first accordion with styling to show everything by default if js fails.
- Panel title text has span with class "toggle-text". This can be used with custom css to change content on show/hide.
Accordion — Alternate
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Complete the application
Log in and complete the online application. After you submit your application, you cannot make changes.
Need to withdraw your application?
If your financial situation changes, you may withdraw your application from consideration before 15 October of the year in which you applied by going to your Manage My Scholarships page.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
HTML
<section class="full-width">
<noscript>
<style>
.collapse {
display: block;
}
</style>
</noscript>
<div id="accordionExampleAlt" class="panel-group-alt">
<div class="panel-alt">
<div class="panel-heading-alt">
<div class="panel-title-alt">
<h3><a data-toggle="collapse" data-parent="#accordionExampleAlt" href="#collapseOneRedesign" class="collapsed h3">Lorem ipsum dolor sit amet, consectetur adipiscing</a></h3>
</div>
</div>
<div id="collapseOneRedesign" class="panel-collapse collapse">
<div class="panel-body-alt">
<h4 class="alt-underline">Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h4 class="alt-underline">Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="panel-alt">
<div class="panel-heading-alt">
<div class="panel-title-alt">
<h3><a data-toggle="collapse" data-parent="#accordionExampleAlt" href="#collapseTwoRedesign" class="collapsed h3">Lorem ipsum dolor sit amet, consectetur adipiscing </a></h3>
</div>
</div>
<div id="collapseTwoRedesign" class="panel-collapse collapse">
<div class="panel-body-alt">
<h4 class="alt-underline">Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h4 class="alt-underline">Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</section>
Problem Being Solved
Some users may need to review large chunks of content that can interfere with the main goal of the page.
When to Use
The accordion should be used for content that only a few users will need to access, e.g., video transcripts. It can also be used when a user only needs to see detailed information for one or two items out of a long list, e.g., Waivers browse.
When Not to Use
Because accordions hide content, they should not be used when the content is pertinent to most audience members.
Formatting
- Place checklist inside section that has the class name "full-width"
- Add "collapsed" class to all accordions by default.
- Don't use "panel-default" class.
- Add a noscript tag immediately before first accordion with styling to show everything by default if js fails.